<template>
<div class="bg flex-col basic-padding basic-margin" :style='{"width":width+"%", "minHeight":minHeight+"px"}'>
  <div class="header flex-row-bet w-100">
    <div class="title">{{title}}</div>
    <div>{{time}}</div>
  </div>
  {{ subtitle }}
  <div class="context">
    <slot>Insert Something Here...</slot>
  </div>
</div>
</template>

<script>
export default {
  name: "chart-frame",
  props: {
    title: String,
    subtitle: String,
    width: Number,
    minHeight: {
      type: Number,
      default: 600
    },
    time: {
      type: String,
      default: ''
    }
  },

  mounted() {
    this.$api.updateTime().then(res => {
      console.log('updateTime', res.data.data.updateTime)
      if (this.time === '') {
        this.time = res.data.data.updateTime
      }

    })
  },

  data() {
    return {
      // time: new Date().toDateString()
    }
  }
};
</script>

<style scoped>
.title {
  letter-spacing: 0.02rem;
  font-size: 30px;
  font-weight: 600;
}
.context {

  /*display: block;*/

  /*align-items: center;*/
  /*justify-content: center;*/

}
</style>